<template>
  <div class="my-user">
    <!--登录-->
    <transition name="fade">
      <div class="center-div" v-show="tabIndex === 0">
        <div class="title">登 录</div>
        <Form :model="loginForm" label-position="top">
          <FormItem label="昵称">
            <Input v-model="loginForm.nickname" />
          </FormItem>
          <FormItem label="账号">
            <Input v-model="loginForm.account" />
          </FormItem>
          <FormItem label="密码">
            <Input v-model="loginForm.password" />
          </FormItem>
          <FormItem>
            <Button shape="circle" @click="tabIndex = 1">立即注册</Button>
            <Button type="success" style="float:right;">登录</Button>
          </FormItem>
        </Form>
      </div>
    </transition>

    <!--注册-->
    <transition name="fade">
      <div class="center-div" v-show="tabIndex === 1">
        <div class="title">注 册</div>
        <Form :model="loginForm" label-position="top">
          <FormItem label="昵称">
            <Input v-model="loginForm.nickname" />
          </FormItem>
          <FormItem label="账号">
            <Input v-model="loginForm.account" />
          </FormItem>
          <FormItem label="密码">
            <Input v-model="loginForm.password" />
          </FormItem>
          <FormItem>
            <Button shape="circle" @click="tabIndex = 0">返回登录</Button>
            <Button type="success" style="float:right;">注册</Button>
          </FormItem>
        </Form>
      </div>
    </transition>

    <!--用户-->
    <transition name="fade">
      <div class="center-div" v-show="tabIndex === 2">
        <div class="title">用 户</div>
        <div class="info">昵称：</div>
        <div class="info">账号：</div>
        <div class="info">密码：</div>
        <div class="info">
          <Button style="float:right;margin-top:15px;">退出登录</Button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0,
      loginForm: {
        nickname: '',
        account: '',
        password: ''
      }
    }
  }
}
</script>

<style scoped>
.my-user {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2f6fc;
}

.center-div {
  position: absolute;
  width: 300px;
  height: 360px;
  background-color: #fff;
  border-radius: 2px;
  padding: 0 20px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
}

.center-div .title {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 26px;
}

.center-div .info {
  height: 70px;
  line-height: 70px;
  font-size: 16px;
}
</style>
